<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="本文总结下面试中 webpack 会被问到的问题。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 webpack 部分">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/webpack-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="本文总结下面试中 webpack 会被问到的问题。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-11-10T01:52:32.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 webpack 部分">
<meta name="twitter:description" content="本文总结下面试中 webpack 会被问到的问题。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/webpack-interview/">





  <title>前端面试总结 webpack 部分 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/webpack-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 webpack 部分</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T11:11:11+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/webpack-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/webpack-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2.2k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  8
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文总结下面试中 webpack 会被问到的问题。 <a id="more"></a></p>
<p>来源：<a href="https://juejin.im/post/5e03fe81f265da33cd03c0fd#heading-1" target="_blank" rel="noopener">掘金：大厂面试中遇到的几十道 webpack 与 react 面试题</a> | <a href="https://github.com/shfshanyue/Daily-Question/labels/webpack" target="_blank" rel="noopener">github</a></p>
<h3 id="webpack-是用来做什么的，原理是什么"><a href="#webpack-是用来做什么的，原理是什么" class="headerlink" title="webpack 是用来做什么的，原理是什么"></a>webpack 是用来做什么的，原理是什么</h3><p>webpack 是一个打包模块的机制，把依赖的模块转化成可以代表这些包的静态文件，识别入口文件和模块依赖来打包代码，自动对代码使用的方式如 commonJS、amd、es6 import 进行分析，webpack 做的就是分析代码、转换代码、编译代码、输出代码。webpack 本身是一个 node 的模块，故 webpack.config.js 是以 commonJS 形式书写。</p>
<p>原理：webpack 中每个模块都有一个唯一的 ID ，是从 0 开始递增的。整个打包后的 bundle.js 是一个立即执行函数，参数是一个数组，数组的每一项都为一个 function，其内容则是每个模块内容，并按照 require （或其他模块化引入）的顺序排列。</p>
<ul>
<li><p>commonJS：</p>
<p>如下两个文件 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_common/a.js" target="_blank" rel="noopener">a.js</a> 与 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_common/b.js" target="_blank" rel="noopener">b.js</a>，其在 webpack@2 下打包之后的文件 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_common/build-webpack@2/bundle.js" target="_blank" rel="noopener">bundle.js</a> 与在 <a href="mailto:webpack@4.41.5" target="_blank" rel="noopener">webpack@4.41.5</a> 下打包之后的文件 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_common/build-webpack@4.41.5/bundle.js" target="_blank" rel="noopener">bundle.js</a> 。</p>
<p><code>_webpack_require</code> 是模块加载函数，接收的参数即为模块 ID ，这个函数中调用了 module.call，参数为 <code>module.exports,module,module.exports,_webpack_require</code>，相当于执行传入这个匿名函数中的数组项，并将其中的 exports 绑定到  <code>module.exports</code> 中。对于 b.js ，webpack 将整个文件包裹了起来，添加了三个参数变量，将 a.js 中 export 属性都绑定到了参数 <code>exports</code> 上，在 <code>__webpack_require</code> 函数中返回这个 export 对象从而导出 a.js 中返回的对象。对于 a.js ，使用的方式即从具有导入模块的数组入手获取依赖的对象，之后使用这个对象。</p>
<p>可以看到 <a href="mailto:webpack@4.41.5" target="_blank" rel="noopener">webpack@4.41.5</a> 相对于老版本的 webpack 基本相同，只不过增加一些属性，其中就有可以进行 commonJS 与 es6 module 混用模块的逻辑等。</p>
</li>
<li><p>ES 6 module：</p>
<p>如下两个文件 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_es6module/app.js" target="_blank" rel="noopener">app.js</a> 与 <a href="https://gitee.com/huangrenhao/jd/blob/master/readingNotes-master/question/webpack-question/webpack_principle_es6module/a.js" target="_blank" rel="noopener">a.js</a> ，在 webpack@2 下打包之后的文件 <a href="https://gitee.com/huangrenhao/jd/tree/master/readingNotes-master/question/webpack-question/webpack_principle_es6module/build-webpack@2/bundle.js" target="_blank" rel="noopener">bundle.js</a> 与在 <a href="mailto:webpack@4.41.5" target="_blank" rel="noopener">webpack@4.41.5</a> 下打包之后的文件 <a href="https://gitee.com/huangrenhao/jd/tree/master/readingNotes-master/question/webpack-question/webpack_principle_es6module/build-webpack@4.41.5/bundle.js" target="_blank" rel="noopener">bundle.js</a> 。</p>
<p>对于 app.js 与 a.js 的处理和 commonJS 在 webpack@2 上基本相同。因为是 es 6 模块，故首先通过 <code>Object.defineProperty</code> 在 <code>__webpack_exports__</code>上添加了属性 <code>__esModule</code> ，值为 true 表示这是一个 es 模块。需要注意的是在 <a href="mailto:webpack@4.41.5" target="_blank" rel="noopener">webpack@4.41.5</a> 中，其中立即函数执行的参数变为了一个？？？</p>
</li>
</ul>
<blockquote>
<p>参考：</p>
<ul>
<li><a href="https://www.jianshu.com/p/e24ed38d89fd" target="_blank" rel="noopener">简书：webpack 打包原理</a></li>
<li><a href="https://www.jianshu.com/p/e8ec61954748" target="_blank" rel="noopener">简书：webpack2 是如何实现 ES6 modules 的</a></li>
</ul>
</blockquote>
<h3 id="webpack-的-loader-的作用是什么，有没有自己写过一个-webpack-的-loader"><a href="#webpack-的-loader-的作用是什么，有没有自己写过一个-webpack-的-loader" class="headerlink" title="webpack 的 loader 的作用是什么，有没有自己写过一个 webpack 的 loader"></a>webpack 的 loader 的作用是什么，有没有自己写过一个 webpack 的 loader</h3><p>webpack 是运行在 node 之上的，一个 loader 其实就是一个 node 模块。loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受文件源码作为参数，返回转换的结果。默认情况下 webpack 传给 loader 的原内容都是 UTF-8 格式编码的字符串。</p>
<p>loader 的执行顺序和代码书写的顺序是相反的，即从下至上、从左至右。第一个执行的 loader 会接受源文件作为参数，下一次执行的loader 会接受前一个 loader 执行的返回值作为参数。</p>
<p>详情见 <a href="https://huangrenhao.gitee.io/2020/09/03/webpack-loader-plugin/">webpack 中的 loader 与 plugin</a></p>
<blockquote>
<p>参考</p>
<ul>
<li><a href="https://www.jianshu.com/p/c021b78c9ef2" target="_blank" rel="noopener">webpack 原理：编写 loader 和 plugin</a></li>
</ul>
</blockquote>
<h3 id="webpack-中-plugin-的作用是什么，有没有自己写过"><a href="#webpack-中-plugin-的作用是什么，有没有自己写过" class="headerlink" title="webpack 中 plugin 的作用是什么，有没有自己写过"></a>webpack 中 plugin 的作用是什么，有没有自己写过</h3><p>webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 api 改变输出结果。</p>
<pre class=" language-js"><code class="language-js"><span class="token comment" spellcheck="true">// 一个最基础的 plugin</span>
<span class="token keyword">class</span> <span class="token class-name">BasicPlugin</span><span class="token punctuation">{</span>
  <span class="token comment" spellcheck="true">// 在构造函数中获取用户给该插件传入的配置</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token punctuation">}</span>

  <span class="token comment" spellcheck="true">// Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象</span>
  <span class="token function">apply</span><span class="token punctuation">(</span>compiler<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true">//通过compiler.plugin(事件名称, 回调函数)监听到Webpack广播出来的事件。</span>
   <span class="token comment" spellcheck="true">//并且可以通过compiler对象去操作Webpack</span>
      compiler<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'compilation'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span>compilation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">// 导出 Plugin</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> BasicPlugin<span class="token punctuation">;</span>
</code></pre>
<p>compiler 和 compilation 是 plugin 和 webpack 之间的桥梁：</p>
<ul>
<li>Compiler 对象包含了 webpack 环境所有的配置信息，包含 options、loaders、plugins 这些信息，这个对象在 webpack 启动的时候被实例化，全局唯一。</li>
<li>Compilation 对象包含当前的模块资源、编译生成资源、变化的文件等。当Webpack以开发模式运行时，每当检测到一个文件变化，一次新的<code>Compilation</code>将被创建。<code>Compilation</code>对象也提供了很多事件回调供插件做扩展。通过<code>Compilation</code>也能读取到<code>Compiler</code>对象</li>
</ul>
<p><code>Compiler</code>和<code>Compilation</code>的区别在于：<code>Compiler</code>代表了整个Webpack从启动到关闭的生命周期，而<code>Compilation</code>只是代表了一次新的编译。</p>
<h3 id="loader-与-plugin-的区别"><a href="#loader-与-plugin-的区别" class="headerlink" title="loader 与 plugin 的区别"></a>loader 与 plugin 的区别</h3><p>对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程</p>
<p>plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务</p>
<h3 id="使用-webpack-时如何优化项目体积"><a href="#使用-webpack-时如何优化项目体积" class="headerlink" title="使用 webpack 时如何优化项目体积"></a>使用 webpack 时如何优化项目体积</h3><p>code-spliting</p>
<ul>
<li><p>提取公共模块：将第三方类库或者都用到的打包成 vendor.js，以提高缓存命中率</p>
<p>一般做法：在入口中声明要提取的模块，如 react、redux 等，然后在插件中传入 name 属性，值为在入口处的名称</p>
</li>
<li><p>将项目本身的代码分成多个 js，分别进行加载</p>
<p>一般按照页面分割实现，在路由处引入各个页面时使用。如插件 Loadable 或 bundle-loader?lazy&amp;name=xxx!path/subpath</p>
</li>
</ul>
<h3 id="vue-loader-的实现原理是什么"><a href="#vue-loader-的实现原理是什么" class="headerlink" title="vue-loader 的实现原理是什么"></a>vue-loader 的实现原理是什么</h3><blockquote>
<p>参考：</p>
<ul>
<li><a href="https://segmentfault.com/a/1190000018600714" target="_blank" rel="noopener">webpack loader 高手进阶</a></li>
</ul>
</blockquote>
<h3 id="什么是-HMR，原理是什么"><a href="#什么是-HMR，原理是什么" class="headerlink" title="什么是 HMR，原理是什么"></a>什么是 HMR，原理是什么</h3><p>hmr，hot-module-replacement，模块热重载</p>
<p>webpack-dev-server 源码中会创建 server，调用的是 express，server 创建后会执行  listen 监听从 client 发出的请求，这里的 listen 执行时会创建 socketServer，有SockJSServer、WebSocketServer，分别对应 sockJs 和 ws，</p>
<h3 id="webpack-中-tree-shaking-的原理是什么"><a href="#webpack-中-tree-shaking-的原理是什么" class="headerlink" title="webpack 中 tree shaking 的原理是什么"></a>webpack 中 tree shaking 的原理是什么</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2019/10/15/webpack-bale-tree-shaking/">webpack tree shaking</a></p>
<blockquote>
<p><a href="https://www.jianshu.com/p/da61456198cb" target="_blank" rel="noopener">参考 tree shaking 原理</a></p>
</blockquote>
<h3 id="如何打开-tree-shaking"><a href="#如何打开-tree-shaking" class="headerlink" title="如何打开 tree-shaking"></a>如何打开 tree-shaking</h3><ul>
<li>使用打包命令进行压缩： <code>webpack -optimize-minimize</code></li>
<li><code>-optimize-minimize</code> 底层实现是插件<code>UglifyJsPlugin</code>，在 webpack 中直接配置 <code>new webpack.optimize.UglifyJsPlugin()</code>。注意 typescript 需要将 target 改为 es6，因为如果 es5 的时候触发的是 commonJS 规范加载模块</li>
</ul>
<h3 id="使用-webpack-打包时，如何更好的利用-long-term-cache"><a href="#使用-webpack-打包时，如何更好的利用-long-term-cache" class="headerlink" title="使用 webpack 打包时，如何更好的利用 long term cache"></a>使用 webpack 打包时，如何更好的利用 long term cache</h3><h3 id="随着-http2-的发展，webpack-有没有更好的打包方案"><a href="#随着-http2-的发展，webpack-有没有更好的打包方案" class="headerlink" title="随着 http2 的发展，webpack 有没有更好的打包方案"></a>随着 http2 的发展，webpack 有没有更好的打包方案</h3><h3 id="webpack-devServer-中配置-proxy-解决开发环境下跨域问题的原理"><a href="#webpack-devServer-中配置-proxy-解决开发环境下跨域问题的原理" class="headerlink" title="webpack devServer 中配置 proxy 解决开发环境下跨域问题的原理"></a>webpack devServer 中配置 proxy 解决开发环境下跨域问题的原理</h3><p>proxy 本质上时使用 <code>http-proxy-middleware</code>这个 http 代理中间件，实现请求转发给其他服务器。</p>
<h3 id="babel-工作原理"><a href="#babel-工作原理" class="headerlink" title="babel 工作原理"></a>babel 工作原理</h3><p>babel，转译器，把同种语言的高规则版本翻译成低规则版本。转译过程分为三个阶段（以 es6 转译为 es5 为例）：</p>
<ul>
<li>parsing：用 babylon 进行解析得到 AST</li>
<li>transforming：用 balel-traverse 对 AST 树进行遍历转译得到新的 AST</li>
<li>generating：用 babel-generator 通过 AST 树生成 ES5 代码</li>
</ul>
<p>babel 只转译新标准引入的语法（如箭头函数），而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的 API 等不会转译，需要自行引入 polyfill 解决</p>
<p>babel-polyfill：使用时会将 es2015+环境整体引入到代码环境中，可以在我们的代码中直接使用新标准引入的新原生对象、新 API 等。可以在入口中 import 或者使用webpack entry 配置 babel-polyfill </p>
<p>babel-runtime：解决 library 中想要使用 polyfill 的情况（实际不能，会污染原来的环境）。babel-runtime就是一个提供了regenerator、core-js和helpers的运行时库。由于 runtime 不会污染全局环境，所以实例方法无法正常工作</p>
<p>core-js：实现 polyfill、runtime 的核心（polyfill、runtime 是对 core-js 和 regenerator 的再封装，但两者都是整体引入，无法实现按需引入）core-js 可以实现按需引入，其结构是高度模块化，每个特性都组织到一个小模块中，层层组织。可以类似 polyfill 直接把特性加入全局环境中，或者像 runtime 一样以库的形式来使用特性，但不能使用实例方法（因为要到 prototype 上找），可以使用<code>::</code> 来调用而不是<code>.</code> 调动实例方式</p>
<blockquote>
<p><a href="https://www.jianshu.com/p/e9b94b2d52e2" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="webpack-中-url-loading为什么超过-limit-就不进行-base64-编码"><a href="#webpack-中-url-loading为什么超过-limit-就不进行-base64-编码" class="headerlink" title="webpack 中 url-loading为什么超过 limit 就不进行 base64 编码"></a>webpack 中 url-loading为什么超过 limit 就不进行 base64 编码</h3><p>将图片等文件转化为 base64 编码字符串能够减少 http 请求次数，但增加了 js 或 html 文件体积。如果图片在项目中多次用到，使用 http 形式可以利用缓存，故需要平衡考虑。如果图片太大编码字符串太长还不如使用 http 请求</p>
<h3 id="webpack-打包构建过程"><a href="#webpack-打包构建过程" class="headerlink" title="webpack 打包构建过程"></a>webpack 打包构建过程</h3>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/24/open-interview/" rel="next" title="前端面试总结 开放性问题">
                <i class="fa fa-chevron-left"></i> 前端面试总结 开放性问题
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/algorithm-sort/" rel="prev" title="排序算法">
                排序算法 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-是用来做什么的，原理是什么"><span class="nav-number">1.</span> <span class="nav-text">webpack 是用来做什么的，原理是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-的-loader-的作用是什么，有没有自己写过一个-webpack-的-loader"><span class="nav-number">2.</span> <span class="nav-text">webpack 的 loader 的作用是什么，有没有自己写过一个 webpack 的 loader</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-中-plugin-的作用是什么，有没有自己写过"><span class="nav-number">3.</span> <span class="nav-text">webpack 中 plugin 的作用是什么，有没有自己写过</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#loader-与-plugin-的区别"><span class="nav-number">4.</span> <span class="nav-text">loader 与 plugin 的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-webpack-时如何优化项目体积"><span class="nav-number">5.</span> <span class="nav-text">使用 webpack 时如何优化项目体积</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-loader-的实现原理是什么"><span class="nav-number">6.</span> <span class="nav-text">vue-loader 的实现原理是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-HMR，原理是什么"><span class="nav-number">7.</span> <span class="nav-text">什么是 HMR，原理是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-中-tree-shaking-的原理是什么"><span class="nav-number">8.</span> <span class="nav-text">webpack 中 tree shaking 的原理是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何打开-tree-shaking"><span class="nav-number">9.</span> <span class="nav-text">如何打开 tree-shaking</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-webpack-打包时，如何更好的利用-long-term-cache"><span class="nav-number">10.</span> <span class="nav-text">使用 webpack 打包时，如何更好的利用 long term cache</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#随着-http2-的发展，webpack-有没有更好的打包方案"><span class="nav-number">11.</span> <span class="nav-text">随着 http2 的发展，webpack 有没有更好的打包方案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-devServer-中配置-proxy-解决开发环境下跨域问题的原理"><span class="nav-number">12.</span> <span class="nav-text">webpack devServer 中配置 proxy 解决开发环境下跨域问题的原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#babel-工作原理"><span class="nav-number">13.</span> <span class="nav-text">babel 工作原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-中-url-loading为什么超过-limit-就不进行-base64-编码"><span class="nav-number">14.</span> <span class="nav-text">webpack 中 url-loading为什么超过 limit 就不进行 base64 编码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-打包构建过程"><span class="nav-number">15.</span> <span class="nav-text">webpack 打包构建过程</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
